<template>
  <div>
    <!-- -----------------------------------------------------申请信息-------------------------------------------------------------- -->
    <el-divider>申请信息</el-divider>
    <div class="dialog_left children">
      <el-descriptions direction="vertical" :column="5" border>
        <el-descriptions-item label="申请时间">{{ form.applicationTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="申请人">{{ form.applicantName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="申请类型">
          <div :style="'color:' + ['#409EFF', '#67C23A', '#E6A23C'][form.type]">{{ ['维修', '保养',
              '其他'][form.type]
          }}</div>
        </el-descriptions-item>
        <el-descriptions-item :label="['维修单号', '保养单号', '其他单号'][form.type]">{{ form.orderNum || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="备注">{{ form.remark || '-' }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- ---------------------------------------------------相关附件-------------------------------------------------------- -->
    <el-divider>相关附件</el-divider>
    <el-link :disabled="!form.file" type="primary" :href="form.file" target="_blank">
      <i class="el-icon-document"></i>
      <span>下载附件{{ handleSubstring(form.file) }}</span>
    </el-link>
    <!-- ---------------------------------------------------领料列表----------------------------------------------------------- -->
    <div class="dialog_table">
      <el-divider>领料列表</el-divider>
      <el-table :data="pickConsumableVos" style="width: 100%" border>
        <el-table-column label="序号" width="100">
          <template slot-scope="scope">
            <div> {{ scope.$index + 1 }} </div>
          </template>
        </el-table-column>
        <el-table-column prop="consPriceAndAmountVo.materialNum" label="物料编号" />
        <el-table-column prop="consPriceAndAmountVo.materialName" label="物料名称" />
        <el-table-column prop="consPriceAndAmountVo.model" label="规格型号">
          <template slot-scope="{row}">
            <div>{{ row.consPriceAndAmountVo && row.consPriceAndAmountVo.model || '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="consPriceAndAmountVo.typeName" label="类别" />
        <el-table-column label="类型">
          <template slot-scope="{row}">
            <dict-tags :options="SparePartsAndConsumables"
              :value="row.consPriceAndAmountVo && row.consPriceAndAmountVo.kind" />
          </template>
        </el-table-column>
        <el-table-column prop="storehouseName" label="所在仓库" />
        <el-table-column prop="amount" label="领用数量" />
        <el-table-column prop="consPriceAndAmountVo.unitName" label="单位" />
        <el-table-column prop="consPriceAndAmountVo.overplusAmount" label="待出库数量">
          <template slot-scope="scope">
            <div> {{ scope.row.overplusAmount || '0' }} </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-divider>审核信息</el-divider>
    <div class="steps">
      <el-steps space="80px" align-center finish-status="success" direction="vertical">
        <el-step status="success" title="开始" icon="el-icon-s-help"
          :description="'开始时间：' + (form.applicationTime || '-')">
        </el-step>
        <el-step v-for="(item, index) in stepList" :key="index"
          :status="['wait', 'wait', 'success', 'error'][item.status]" :title="item.userName || '-'"
          icon="el-icon-s-help">
          <span slot="description">
            审核时间：{{ item.auditTime || '-' }}
            <br />
            审核意见：{{ item.view || '-' }}
          </span>
        </el-step>
        <el-step :status="islength ? 'success' : 'wait'" title="结束" icon="el-icon-s-help">
        </el-step>
      </el-steps>
    </div>
  </div>
</template>

<script>
import { listDetail } from '@/api/deviceConsumable/acquisitionapplication'
export default {
  name: 'detailed',
  props: {
    parentid: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      form: {},//基本信息
      pickConsumableVos: [],
      islength: true,
      stepList: []//审核信息
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    async getlist () {
      const { data: res1 } = await listDetail(this.parentid);
      this.form = res1
      this.stepList = res1.auditVos
      this.pickConsumableVos = res1.pickConsumableVos.map(item => {
        return {
          ...item,
          storehouseName: res1.storehouseName
        }
      })
      for (let index = 0; index < res1.auditVos.length; index++) {
        const element = res1.auditVos[index];
        if (element.status !== '2' && element.userType === '0') {//获取当前节点
          this.islength = false
        }
      }
    },
    totalPrice (price, num) {
      return price * num
    },
    // 附件数据重组
    handleSubstring (str) {
      if (str) {
        const index = str.lastIndexOf(".");
        str = str.substring(index + 1, str.length);
        return '.' + str
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  width: 90%;
  margin: 0px auto;
}

.dialog_left {
  width: 100%;

  &_image {
    width: 85px;
  }
}

.dialog_table {
  margin-top: 20px;
}

// .dialog_left>div:nth-child(1){
//   flex:1
// }
.dialog_left>div:nth-child(2) {
  flex: 10;
  margin-left: 10px
}

/* el-descriptions-item 文字居中 */
::v-deep .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}

.steps {
  display: flex;
  justify-content: center;
}
</style>